<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .box {
        width: 300px;
        height: 350px;
        border: 1px solid #000;
        margin: 20px auto;
        position: relative;
      }
      #title {
        width: 200px;
        height: 200px;
        margin: 20px auto;
        /* color: yellow; */
        font-size: 120px;
        text-align: center;
        line-height: 200px;
      }
      .alt {
        padding: 0 14px;
        font-size: small;
      }
      .list {
        width: 100%;
        margin-top: 20px;
        overflow: hidden;
      }
      .list li {
        float: left;
        width: 60px;
        height: 60px;
        font-size: 32px;
        text-align: center;
        line-height: 60px;
        font-weight: 600;
      }
      #num {
        width: 150px;
        height: 36px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        line-height: 36px;
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -75px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2 id="title">红</h2>
      <p class="alt">提示：看上面的字选择正确的颜色</p>
      <ul class="list">
        <li>红</li>
        <li>黄</li>
        <li>蓝</li>
        <li>绿</li>
        <li>黑</li>
      </ul>
      <p id="num">0</p>
    </div>
    <script type="text/javascript">
      //1、获取所需元素
      var _title = document.getElementById("title"),
        _lis = document.getElementsByTagName("li"),
        _num = document.getElementById("num");

      //2、设置初始值（颜色数组, 字体数组）
      var _color = ["red", "yellow", "blue", "green", "black"];
      var _font = ["红", "黄", "蓝", "绿", "黑"];
      var n = 0; //得分

      //3、设置初始随机值
      var aColor = Math.floor(Math.random() * _color.length);
      var aFont = Math.floor(Math.random() * _font.length);
      _title.innerHTML = _font[aFont];
      _title.style.color = _color[aColor];

      console.log(_color[aColor]);
      //3-1、设置选项的初始值
      for (var i = 0; i < _lis.length; i++) {
        _lis[i].innerHTML = _font[i];
        _lis[i].style.color = _color[i];
        console.log(_color[0]);
      }

      //4、点击选项值（给每一个lis绑定事件）
      for (var i = 0; i < _lis.length; i++) {
        //4-1、存储当前索引
        _lis[i].index = i;
        //4-2、具体点击的元素
        _lis[i].onclick = function () {
          console.log(_color[this.index]);
          if (_color[this.index] == _color[aColor]) {
            n++;
            if (n >= 10) {
              alert("You Good !");
            }
            //如果条件成立，就重新设置
            aColor = Math.floor(Math.random() * _color.length);
            aFont = Math.floor(Math.random() * _font.length);
            _title.innerHTML = _font[aFont];
            _title.style.color = _color[aColor];
          } else {
            n--;
            if (n < 0) {
              alert("Game Over !");
              n = 0;
            }
            alert("You Lose !");
            //如果条件成立，就重新设置
            aColor = Math.floor(Math.random() * _color.length);
            aFont = Math.floor(Math.random() * _font.length);
            _title.innerHTML = _font[aFont];
            _title.style.color = _color[aColor];
          }
          //把得分赋值给_num
          _num.innerHTML = n;
        };
      }
    </script>
  </body>
</html>
